<template>
  <div>
    <el-row :gutter="5" type="flex" style="flex-wrap:wrap">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="110px" label-identity="right" :disabled="setting.readonly" v-loading="loading">
        <el-col :span="24">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="客户信息"></groupTitle>
          </el-form-item>
          <el-col :span="8" v-if="judgeShow('customerName')">
            <el-form-item label="咨询人" prop="customerName">
              <el-input v-model="dataForm.customerName" required :style="{ width: '100%' }" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('category')">
            <el-form-item label="客户类别" prop="category">
              <custom-tree-select
                v-model="dataForm.category"
                :options="categoryOptions"
                placeholder="请选择"
                lastLevel
                clearable
                required
                :props="{
                  value: 'enCode', // ID字段名
                  label: 'fullName', // 显示名称
                  children: 'children', // 子级字段名
                  disabled: 'selectable'
                }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('age')">
            <el-form-item label="年龄段" prop="age">
              <el-select v-model="dataForm.age" placeholder="请选择" clearable required :style="{ width: '100%' }">
                <el-option v-for="item in ageOptions" :key="item.id" :label="item.fullName" :value="item.enCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('visitDate')">
            <el-form-item label="上门日期" prop="visitDate">
              <el-date-picker v-model="dataForm.visitDate" placeholder="请选择" clearable :disabled="judgeWrite('visitDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="招商信息"></groupTitle>
          </el-form-item>
          <el-col :span="8" v-if="judgeShow('manageId')">
            <el-form-item label="招商经理" prop="manageId">
              <user-select v-model="dataForm.manageId" placeholder="请选择" clearable required :disabled="judgeWrite('manageId')"></user-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('channel')">
            <el-form-item label="咨询渠道" prop="channel">
              <el-select v-model="dataForm.channel" placeholder="请选择" clearable required :style="{ width: '100%' }" filterable :disabled="judgeWrite('channel')">
                <el-option-group v-for="group in channelOptions" :key="group.id" :label="group.fullName">
                  <el-option v-for="item in group.children" :key="item.id" :label="item.fullName" :value="item.enCode"></el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('consultTime')">
            <el-form-item label="咨询日期" prop="consultTime">
              <el-date-picker v-model="dataForm.consultTime" placeholder="请选择" clearable required :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp" :disabled="judgeWrite('consultTime')"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('brand')">
            <el-form-item label="签约品牌" prop="brand">
              <el-select v-model="dataForm.brand" placeholder="请选择签约品牌" :disabled="judgeWrite('brand')">
                <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in brandOptions" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="judgeShow('coopMode')">
            <el-form-item label="合作形式" prop="coopMode">
              <el-col :span="12">
                <el-input-number v-model="dataForm.coopMode" :min="0" :max="100" label="请输入合作形式" :disabled="judgeWrite('coopMode')" :style="{ width: '100%' }"></el-input-number>
              </el-col>
              <span style="color:#606266;">校加盟</span>
            </el-form-item>
          </el-col>

          <el-col :span="8" v-if="judgeShow('agent')">
            <el-form-item label="代理/分公司" prop="agent">
              <el-input v-model="dataForm.agent" placeholder="若为代理/分公司区域" clearable :disabled="judgeWrite('agent')" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('referees')">
            <el-form-item label="推荐人" prop="referees">
              <el-input v-model="dataForm.referees" placeholder="若为线下推荐" clearable :disabled="judgeWrite('referees')" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="judgeShow('policy')">
            <el-form-item label="加盟政策" prop="policy">
              <el-input v-model="dataForm.policy" placeholder="请输入" :disabled="judgeWrite('policy')" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24" v-if="judgeShow('giveList')">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="赠送清单"></groupTitle>
            <el-table :data="dataForm.giveList" size="mini" empty-text="点击下方“添加”按钮">
              <el-table-column type="index" width="50" label="序号" align="center" />
              <el-table-column prop="goodsId" label="赠送商品" header-align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.goodsId" placeholder="请选择商品" filterable clearable @change="getGoodsTypeOptions(scope)" :disabled="judgeWrite('giveList')">
                    <el-option v-for="item in goodsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="standards" label="商品规格" header-align="center">
                <template slot-scope="scope">
                  <el-select v-model="scope.row.standards" placeholder="请选择规格" filterable clearable :disabled="judgeWrite('giveList')">
                    <el-option v-for="item in scope.row.typeOptins" :key="item.value" :label="item.label + '/' + item.unitDescribe" :value="item.value"></el-option>
                  </el-select>
                  <!--                  <el-input v-model="scope.row.standards" placeholder="请输入商品规格" clearable :disabled="judgeWrite('giveList')"></el-input>-->
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量/金额" align="center" width="140">
                <template slot-scope="scope">
                  <el-input-number v-model="scope.row.num" clearable :disabled="judgeWrite('giveList')"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="needShip" label="需要发货" align="center" width="80">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.needShip" :disabled="judgeWrite('giveList')"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column prop="description" label="备注" header-align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.description" placeholder="请输入备注" clearable :disabled="judgeWrite('giveList')"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="50">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" class="cu-table-delBtn" @click="handleDelGiveList(scope.$index)" v-if="!judgeWrite('giveList')">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="table-actions" @click="addHandleGiveList()" v-if="!judgeWrite('giveList')">
              <el-button type="text" icon="el-icon-plus">添加</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="基本信息"></groupTitle>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('fullName')">
          <el-form-item label="校区全称" prop="fullName">
            <el-input v-model="dataForm.fullName" placeholder="请输入" clearable required :disabled="judgeWrite('fullName')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('shortName')">
          <el-form-item label="校区简称" prop="shortName">
            <div style="display: flex;align-items: center;">
              <el-input v-model="dataForm.shortName" placeholder="请输入" clearable required :disabled="judgeWrite('shortName')" :style="{ width: '100%' }"></el-input>
              <el-tooltip class="item" effect="dark" content="命名规则：城市+小学/中学关键字+校区" placement="top">
                <span style="margin-left: 10px;width: 20px;height: 17px;background: #cccccc;display: flex;justify-content: center;align-items: center;border-radius: 50%;color: #fff;overflow: hidden;padding-top: 2px;font-size: 12px;">
                  !
                </span>
              </el-tooltip>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('designerId')">
          <el-form-item label="设计师" prop="designerId">
            <user-select v-model="dataForm.designerId" placeholder="请选择" clearable required :disabled="judgeWrite('designerId')"></user-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('manager')">
          <el-form-item label="校区负责人" prop="manager">
            <el-input v-model="dataForm.manager" placeholder="请输入" clearable required :disabled="judgeWrite('manager')" :style="{ manager: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('managerMobile')">
          <el-form-item label="负责人电话" prop="managerMobile">
            <el-input v-model="dataForm.managerMobile" placeholder="请输入" clearable required :disabled="judgeWrite('managerMobile')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('wechat')">
          <el-form-item label="负责人微信" prop="wechat">
            <el-input v-model="dataForm.wechat" placeholder="请输入" clearable required :disabled="judgeWrite('wechat')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('area')">
          <el-form-item label="校区地址" prop="area">
            <custom-address v-model="dataForm.area" placeholder="请选择行政区域" :clearable="true" required :disabled="judgeWrite('area')" style="width: 100%"></custom-address>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('address')">
          <el-form-item label-width="2px" prop="address">
            <el-input v-model="dataForm.address" placeholder="请输入详细地址" clearable required :disabled="judgeWrite('address')" style="width: 100%"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="judgeShow('type')">
          <el-form-item label="校区类型" prop="type">
            <el-select v-model="dataForm.type" placeholder="请选择校区类型" :disabled="judgeWrite('type')">
              <el-option :key="item.id" :label="item.fullName" :value="item.enCode" v-for="item in typeOptions" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('schoolName')">
          <el-form-item label="关联学校" prop="schoolName">
            <el-autocomplete v-model="dataForm.schoolName" :fetch-suggestions="querySearchSchoolAsync" placeholder="请输入关联小学/中学" @select="handleSelectSchool" :disabled="judgeWrite('schoolName')" :style="{ width: '100%' }">
              <template slot-scope="{ item }">
                <div class="name">{{ item.name }}</div>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('schoolSituation')">
          <el-form-item label="学校规模" prop="schoolSituation">
            <el-input v-model="dataForm.schoolSituation" placeholder="请输入" clearable :disabled="judgeWrite('schoolSituation')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('email')">
          <el-form-item label="校区邮箱" prop="email">
            <el-input v-model="dataForm.email" placeholder="请输入" clearable :disabled="judgeWrite('email')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('siteArea')">
          <el-form-item label="场地面积" prop="siteArea">
            <el-input v-model="dataForm.siteArea" placeholder="请输入" clearable required :disabled="judgeWrite('siteArea')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" v-if="judgeShow('rent')">
          <el-form-item label="场地月租金" prop="rent">
            <el-input v-model="dataForm.rent" placeholder="请输入" clearable required :disabled="judgeWrite('rent')" :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="judgeShow('site')">
          <el-form-item label="场地情况" prop="site">
            <el-input v-model="dataForm.site" placeholder="请输入" required :disabled="judgeWrite('site')" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="judgeShow('personnel')">
          <el-form-item label="人员情况" prop="personnel">
            <el-input v-model="dataForm.personnel" placeholder="请输入" required :disabled="judgeWrite('personnel')" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="judgeShow('description')">
          <el-form-item label="备注" prop="description">
            <el-input v-model="dataForm.description" placeholder="请输入" :disabled="judgeWrite('description')" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="judgeShow('contractNo')">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="合同信息"></groupTitle>
          </el-form-item>
          <el-row>
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contractNo">
                <el-input v-model="dataForm.contractNo" placeholder="请输入" clearable required :disabled="judgeWrite('contractNo')" :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('signingDate')">
              <el-form-item label="签约日期" prop="signingDate">
                <el-date-picker v-model="dataForm.signingDate" placeholder="请选择" clearable required :disabled="judgeWrite('signingDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('depositDate')">
              <el-form-item label="定金日期" prop="depositDate">
                <el-date-picker v-model="dataForm.depositDate" placeholder="请选择" clearable required :disabled="judgeWrite('depositDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8" v-if="judgeShow('balanceDate')">
              <el-form-item label="余款日期" prop="balanceDate">
                <el-date-picker v-model="dataForm.balanceDate" placeholder="请选择" clearable required :disabled="judgeWrite('balanceDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('startDate')">
              <el-form-item label="服务开始日期" prop="startDate">
                <el-date-picker v-model="dataForm.startDate" placeholder="请选择" clearable required :disabled="judgeWrite('startDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp" :picker-options="pickerOptionsStart2"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('endDate')">
              <el-form-item label="服务截止日期" prop="endDate">
                <el-date-picker v-model="dataForm.endDate" placeholder="请选择" clearable required :disabled="judgeWrite('endDate')" :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="timestamp" :picker-options="pickerOptionsEnd2"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="row-group">
            <span class="row-group-title">加盟费</span>
            <el-col :span="8" v-if="judgeShow('contract')">
              <el-form-item label="特许经营费用" prop="contract">
                <el-input v-model="dataForm.contract" placeholder="请输入" @blur="blurChange" clearable required :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('cloudPlatform')">
              <el-form-item label="云平台使用费" prop="cloudPlatform">
                <el-input v-model="dataForm.cloudPlatform" placeholder="请输入" @blur="blurChange" clearable required :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="judgeShow('franchise')">
              <el-form-item label="品牌加盟费" prop="franchise">
                <el-input v-model="dataForm.franchise" placeholder="请输入" readOnly :disabled="judgeWrite('franchise')" :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="8" v-if="judgeShow('renewal')">
            <el-form-item label="品牌续约费" prop="renewal">
              <el-input v-model="dataForm.renewal" placeholder="请输入" clearable required :disabled="judgeWrite('renewal')" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="judgeShow('deposit')">
            <el-form-item label="品牌保证金" prop="deposit">
              <el-input v-model="dataForm.deposit" placeholder="请输入" clearable required :disabled="judgeWrite('deposit')" :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
        </el-col>
        <el-col :span="24" v-if="judgeShow('contactList')">
          <el-form-item label-width="0">
            <groupTitle content-identity="left" content="投资人信息"></groupTitle>

            <!-- 投资人信息表单域 -->
            <div v-if="!dataForm.contactList || dataForm.contactList.length === 0" class="empty-contact-list">
              <p style="text-align: center; color: #909399; padding: 20px;">点击下方"添加"按钮</p>
            </div>

            <div v-for="(contact, index) in dataForm.contactList" :key="index" class="contact-form-item">
              <div class="contact-header">
                <span class="contact-index">投资人 {{ index + 1 }}</span>
                <el-button size="mini" type="text" class="cu-table-delBtn" @click="handleDelCntactEntityList(index)" v-if="!judgeWrite('contactList')">删除</el-button>
              </div>

              <!-- 基本信息 -->
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="签约人">
                    <el-checkbox v-model="contact.isSigner" :disabled="judgeWrite('contactList')">是</el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="签约类型">
                    <el-select v-model="contact.signingType" placeholder="请选择" clearable :disabled="judgeWrite('contactList')" @change="handleSigningTypeChange(contact)" style="width: 100%">
                      <el-option label="个人签约" value="personal"></el-option>
                      <el-option label="企业签约" value="company"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="姓名">
                    <el-input v-model="contact.name" placeholder="请输入姓名" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="性别">
                    <el-select v-model="contact.gender" placeholder="请选择性别" clearable :disabled="judgeWrite('contactList')" style="width: 100%">
                      <el-option v-for="item in genderOptions" :key="item.id" :label="item.fullName" :value="item.enCode"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="联系电话">
                    <el-input v-model="contact.mobile" placeholder="请输入联系电话" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="证件号码">
                    <el-input v-model="contact.idNumber" placeholder="请输入证件号码" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="微信">
                    <el-input v-model="contact.wechat" placeholder="请输入微信" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="邮箱">
                    <el-input v-model="contact.email" placeholder="请输入邮箱" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <!-- 企业签约信息 -->
              <div v-if="contact.signingType === 'company'" class="company-info">
                <div class="section-title">企业信息</div>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="公司名称">
                      <el-input v-model="contact.companyName" placeholder="请输入公司名称" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="注册地址">
                      <el-input v-model="contact.companyAddress" placeholder="请输入注册地址" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="信用代码">
                      <el-input v-model="contact.creditCode" placeholder="请输入统一社会信用代码" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="公司电话">
                      <el-input v-model="contact.companyPhone" placeholder="请输入公司电话" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公司邮箱">
                      <el-input v-model="contact.companyEmail" placeholder="请输入公司邮箱" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <!-- 法人代表信息 -->
                <div class="section-title">法人代表信息</div>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item label="法人姓名">
                      <el-input v-model="contact.legalRepName" placeholder="请输入法人姓名" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="法人身份证">
                      <el-input v-model="contact.legalRepIdNumber" placeholder="请输入法人身份证号" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="法人电话">
                      <el-input v-model="contact.legalRepMobile" placeholder="请输入法人电话" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="法人微信">
                      <el-input v-model="contact.legalRepWechat" placeholder="请输入法人微信" clearable :disabled="judgeWrite('contactList')" style="width: 100%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>

            <div class="table-actions" @click="addHandleContactEntityList()" v-if="!judgeWrite('contactList')">
              <el-button type="text" icon="el-icon-plus">添加</el-button>
            </div>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <UserBox v-if="userBoxVisible" ref="userBox" @submit="submit" />
  </div>
</template>
<script>
import { getTransitionInfo, createTransition, updateTransition } from '@/api/crm/transition'
import { mapGetters } from 'vuex'
import { getCustomerSelector, getCustomerInfo } from '@/api/crm/customer'
import { getSchoolSelector } from '@/api/crm/school'
import { getGoodsCategory, getGoodsType } from '@/api/services/goods'
import custom from '@/utils/custom'
export default {
  data() {
    return {
      loading: false,
      setting: {},
      eventType: '',
      userBoxVisible: false,
      customer: {
        id: undefined,
        name: undefined,
        address: undefined
      },
      dataForm: {
        id: '',
        fullName: undefined,
        shortName: undefined,
        siteArea: undefined,
        area: [],
        address: undefined,
        schoolId: undefined,
        schoolName: undefined,
        schoolSituation: undefined,
        customerId: undefined,
        customerName: undefined,
        channel: undefined,
        consultTime: undefined,
        site: undefined,
        policy: undefined,
        personnel: undefined,
        manageId: undefined,
        designerId: undefined,
        contractNo: undefined,
        signingDate: undefined,
        depositDate: undefined,
        balanceDate: undefined,
        startDate: undefined,
        endDate: undefined,
        franchise: undefined,
        contract: undefined,
        cloudPlatform: undefined,
        renewal: undefined,
        deposit: undefined,
        visitDate: undefined,
        agent: undefined,
        referees: undefined,
        coopMode: 0,
        contractDate: undefined,
        description: undefined,
        contactList: [],
        giveList: undefined,
        typeOptins: undefined,
        brand: undefined,
        type: undefined,
        manager: undefined,
        managerMobile: undefined,
        wechat: undefined,
        email: undefined,
        category: undefined,
        age: undefined,
        orderId: undefined,
        rent: undefined
      },
      // 开始结束日期限制
      pickerOptionsStart2: {
        disabledDate: time => {
          if (this.dataForm.endTime) {
            return time.getTime() >= new Date(this.dataForm.endTime).getTime()
          }
        }
      },
      // 结束日期限制
      pickerOptionsEnd2: {
        disabledDate: time => {
          if (this.dataForm.startDate) {
            return time.getTime() <= new Date(this.dataForm.startDate).getTime()
          }
        }
      },
      selectGiveItem: undefined,
      goodsId: undefined,
      giveNum: 1,
      rules: {
        customerName: [
          {
            required: true,
            message: '缺少客户信息',
            trigger: 'blur'
          }
        ],
        fullName: [
          {
            required: true,
            message: '请输入校区全称',
            trigger: 'blur'
          }
        ],
        time: [
          {
            required: true,
            message: '请输入咨询时间',
            trigger: 'change'
          }
        ],
        channel: [
          {
            required: true,
            message: '请输入咨询渠道',
            trigger: 'change'
          }
        ],
        shortName: [
          {
            required: true,
            message: '请输入校区简称',
            trigger: 'blur'
          }
        ],
        siteArea: [
          {
            required: true,
            message: '请输入场地面积',
            trigger: 'blur'
          }
        ],
        brand: [
          {
            required: true,
            message: '请选择加盟品牌',
            trigger: 'change'
          }
        ],
        personnel: [
          {
            required: true,
            message: '请输入人员情况',
            trigger: 'blur'
          }
        ],
        site: [
          {
            required: true,
            message: '请输入人员情况',
            trigger: 'blur'
          }
        ],
        designerId: [
          {
            required: true,
            message: '请输入设计师',
            trigger: 'change'
          }
        ],
        consultTime: [
          {
            required: true,
            message: '请选择咨询日期',
            trigger: 'change'
          }
        ],
        area: [
          {
            required: true,
            message: '请输入校区地址',
            trigger: 'change'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ],
        type: [
          {
            required: true,
            message: '请输入选择校区类型',
            trigger: 'change'
          }
        ],
        schoolName: [
          {
            required: true,
            message: '请输入关联小学/中学',
            trigger: 'change'
          }
        ],
        manager: [
          {
            required: true,
            message: '请填写校区负责人',
            trigger: 'blur'
          }
        ],
        managerMobile: [
          {
            required: true,
            message: '请填写校区负责人电话号码',
            trigger: 'blur'
          }
        ],
        policy: [
          {
            required: true,
            message: '请输入加盟政策',
            trigger: 'blur'
          }
        ],
        manageId: [
          {
            required: true,
            message: '请输入招商经理',
            trigger: 'change'
          }
        ],
        contractNo: [
          {
            required: true,
            message: '请输入合同编号',
            trigger: 'blur'
          }
        ],
        signingDate: [
          {
            required: true,
            message: '请选择签约日期',
            trigger: 'change'
          }
        ],
        startDate: [
          {
            required: true,
            message: '请选择服务开始日期',
            trigger: 'change'
          }
        ],
        endDate: [
          {
            required: true,
            message: '请选择服务截止日期',
            trigger: 'change'
          }
        ],
        depositDate: [
          {
            required: true,
            message: '请选择交定金日期',
            trigger: 'change'
          }
        ],
        balanceDate: [
          {
            required: true,
            message: '请选择交余款日期',
            trigger: 'change'
          }
        ],
        category: [
          {
            required: true,
            message: '请选择客户类别',
            trigger: 'change'
          }
        ],
        age: [
          {
            required: true,
            message: '请选择客户年龄段',
            trigger: 'change'
          }
        ],
        franchise: [
          {
            required: true,
            message: '请输入加盟费',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        rent: [
          {
            required: true,
            message: '请输入场地租金',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        cloudPlatform: [
          {
            required: true,
            message: '请输入云平台使用费',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        contract: [
          {
            required: true,
            message: '请输入特许经营费用',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        renewal: [
          {
            required: true,
            message: '请输入续约费',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        deposit: [
          {
            required: true,
            message: '请输入保证金',
            trigger: 'blur'
          },
          {
            pattern: /^\d+(\.\d{1,2})?$/,
            message: '请输入正确的金额',
            trigger: 'blur'
          }
        ],
        giveList: [
          {
            required: true,
            message: '请填写赠送清单',
            trigger: 'change'
          }
        ],
        contactList: [
          {
            required: true,
            message: '请填写联系人信息',
            trigger: 'change'
          }
        ],
        coopMode: [
          {
            required: true,
            message: '请输入合作形式',
            trigger: 'blur'
          }
        ],
        contractDate: [
          {
            required: true,
            message: '请选择下次续约日期',
            trigger: 'blur'
          }
        ]
      },
      schoolIdOptions: [],
      channelOptions: [],
      genderOptions: [],
      // identityOptions: [],
      brandOptions: [],
      goodsOptions: [],
      goodsTypeOptions: [],
      typeOptions: [],
      categoryOptions: [],
      ageOptions: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    // 检查是否有企业签约类型，用于控制企业相关字段的显示
    hasCompanySigning() {
      return this.dataForm.contactList && this.dataForm.contactList.some(item => item.signingType === 'company')
    }
  },
  // watch: {
  //   'dataForm.contract': function(val) {
  //     // if (this.dataForm.franchise > 0) return
  //     this.dataForm.franchise = custom.toDecimal((parseFloat(val) ? parseFloat(val) : 0) + (parseFloat(this.dataForm.cloudPlatform) ? parseFloat(this.dataForm.cloudPlatform) : 0))
  //   },
  //   'dataForm.cloudPlatform': function(val) {
  //     // if (this.dataForm.franchise > 0) return
  //     this.dataForm.franchise = custom.toDecimal((parseFloat(val) ? parseFloat(val) : 0) + (parseFloat(this.dataForm.contract) ? parseFloat(this.dataForm.contract) : 0))
  //   }
  // },
  created() {},
  mounted() {
    this.getAgeOptions()
    this.getCategoryOptions()
    this.$store.dispatch('base/getDictionaryData', { sort: 'CampusType' }).then(res => {
      this.typeOptions = res
    })
    this.$store.dispatch('base/getDictionaryData', { sort: 'sex' }).then(res => {
      this.genderOptions = res
    })
    getGoodsCategory().then(res => {
      this.goodsOptions = res.data
    })
    this.getChannelOptions()
    this.$store.dispatch('base/getDictionaryData', { sort: 'Brand' }).then(res => {
      this.brandOptions = res
    })
    // this.$store.dispatch('base/getDictionaryData', { sort: 'CustomerIdentity' }).then(res => {
    //   this.identityOptions = res
    // })
  },
  methods: {
    getGoodsTypeOptions(scope) {
      getGoodsType(scope.row.goodsId).then(details => {
        this.dataForm.giveList[scope.$index].typeOptins = details.data
        this.dataForm.giveList[scope.$index].standards = undefined
      })
    },
    getAgeOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'CustomerAge' }).then(res => {
        this.ageOptions = res.filter(o => o.enabledMark == 1)
      })
    },
    blurChange() {
      this.dataForm.franchise = custom.toDecimal((parseFloat(this.dataForm.contract) ? parseFloat(this.dataForm.contract) : 0) + (parseFloat(this.dataForm.cloudPlatform) ? parseFloat(this.dataForm.cloudPlatform) : 0))
    },
    getCategoryOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'CustomerCategory' }).then(res => {
        this.categoryOptions = res
      })
    },
    goBack() {
      this.$emit('refresh')
    },
    init(data) {
      this.setting = data
      this.dataForm.id = data.id || ''
      this.$refs['elForm'].resetFields()
      this.$nextTick(() => {
        if (this.dataForm.id) {
          getTransitionInfo(this.dataForm.id).then(res => {
            this.dataForm = res.data
            if (this.dataForm.giveList && this.dataForm.giveList.length > 0) {
              this.dataForm.giveList.map((item, index) => {
                getGoodsType(item.goodsId).then(details => {
                  this.dataForm.giveList[index].typeOptins = details.data
                  let standards = this.dataForm.giveList[index].standards
                  this.dataForm.giveList[index].standards = undefined
                  this.dataForm.giveList[index].standards = standards
                })
              })
            }
          })
        } else {
          if (data.customerId) {
            getCustomerInfo(data.customerId).then(res => {
              this.dataForm.consultTime = res.data.firstConsultTime
              this.dataForm.channel = res.data.firstConsultChannel
              this.dataForm.customerId = res.data.id
              this.dataForm.customerName = res.data.name + '/' + res.data.mobile
              this.dataForm.category = res.data.category
              this.dataForm.age = res.data.age
            })
            this.dataForm.orderId = data.orderId
            this.dataForm.manageId = this.userInfo.userId
            this.dataForm.flowId = data.flowId
          }
        }
      })
    },
    // 验证属性列表
    verifyTable() {
      var result = true
      var message = []
      this.dataForm.contactList.forEach((item, index) => {
        let no = index + 1
        if (item.name === undefined) {
          result = result && false
          message.push('第' + no + '行：姓名不能为空！')
        }
        if (item.gender === undefined) {
          result = result && false
          message.push('第' + no + '行：性别不能为空！')
        }
        if (item.mobile === undefined) {
          result = result && false
          message.push('第' + no + '行：联系电话不能为空！')
        }
        if (item.idNumber === undefined) {
          result = result && false
          message.push('第' + no + '行：证件号码不能为空！')
        }

        // 企业签约验证
        if (item.signingType === 'company') {
          if (!item.companyName) {
            result = result && false
            message.push('第' + no + '行：公司名称不能为空！')
          }
          if (!item.companyAddress) {
            result = result && false
            message.push('第' + no + '行：公司注册地址不能为空！')
          }
          if (!item.creditCode) {
            result = result && false
            message.push('第' + no + '行：统一社会信用代码不能为空！')
          }
          if (!item.legalRepName) {
            result = result && false
            message.push('第' + no + '行：法人代表姓名不能为空！')
          }
          if (!item.legalRepIdNumber) {
            result = result && false
            message.push('第' + no + '行：法人代表身份证号不能为空！')
          }
          if (!item.legalRepMobile) {
            result = result && false
            message.push('第' + no + '行：法人代表联系电话不能为空！')
          }
        }
      })
      if (!result) {
        var temp = ''
        message.forEach(v => {
          temp += `<li>${v}</li>`
        })
        this.$notify({
          title: '属性列表提示',
          dangerouslyUseHTMLString: true,
          type: 'error',
          duration: 2000,
          message: `<ul>${temp}</ul>`
        })
      }

      this.dataForm.giveList &&
        this.dataForm.giveList.forEach((item, index) => {
          let no = index + 1
          if (item.goodsId === undefined) {
            result = result && false
            message.push('第' + no + '行：商品不能为空！')
          }
        })
      if (!result) {
        var temp = ''
        message.forEach(v => {
          temp += `<li>${v}</li>`
        })
        this.$notify({
          title: '属性列表提示',
          dangerouslyUseHTMLString: true,
          type: 'error',
          duration: 2000,
          message: `<ul>${temp}</ul>`
        })
      }
      return result
    },

    dataFormSubmit(eventType) {
      this.$refs['elForm'].validate(valid => {
        if (valid && this.verifyTable()) {
          if (eventType === 'audit' || eventType === 'reject') {
            this.$emit('eventReciver', this.dataForm, eventType)
            return
          }

          this.dataForm.flowState = eventType === 'submit' ? 0 : 1
          this.eventType = eventType
          if (this.eventType === 'submit') {
            this.$confirm('您确定要提交当前流程吗, 是否继续?', '提示', {
              type: 'warning'
            })
              .then(() => {
                this.request()
              })
              .catch(() => {})
          } else {
            this.request()
          }
        }
      })
    },
    checkTime() {
      var start = new Date(this.dataForm.startDate).getTime()
      var end = new Date(this.dataForm.endDate).getTime()
      if (start >= end) {
        this.msgError(this.$t('开始时间不能大于等于结束日期'))
        this.dataForm.endDate = undefined
      }
    },
    request() {
      const formMethod = this.dataForm.id ? updateTransition : createTransition
      formMethod(this.dataForm).then(res => {
        this.$message({
          message: res.msg,
          type: 'success',
          duration: 1000,
          onClose: () => {
            this.$emit('close', true)
          }
        })
      })
    },
    addHandleContactEntityList() {
      let item = {
        name: undefined,
        gender: undefined,
        mobile: undefined,
        idNumber: undefined,
        wechat: undefined,
        qq: undefined,
        email: undefined,
        isSigner: undefined,
        // 新增签约类型字段
        signingType: 'personal', // 默认为个人签约
        // 企业签约信息字段
        companyName: undefined,
        companyAddress: undefined,
        creditCode: undefined,
        companyPhone: undefined,
        companyEmail: undefined,
        // 法人代表信息字段
        legalRepName: undefined,
        legalRepIdNumber: undefined,
        legalRepMobile: undefined,
        legalRepWechat: undefined
      }
      this.dataForm.contactList = this.dataForm.contactList || []
      this.dataForm.contactList.push(item)
    },
    // 处理签约类型变化
    handleSigningTypeChange(row) {
      // 当切换为个人签约时，清空企业相关字段
      if (row.signingType === 'personal') {
        row.companyName = undefined
        row.companyAddress = undefined
        row.creditCode = undefined
        row.companyPhone = undefined
        row.companyEmail = undefined
        row.legalRepName = undefined
        row.legalRepIdNumber = undefined
        row.legalRepMobile = undefined
        row.legalRepWechat = undefined
      }
    },
    handleDelCntactEntityList(index) {
      this.dataForm.contactList.splice(index, 1)
    },
    addHandleGiveList() {
      let item = {
        goodsId: undefined,
        standards: undefined,
        num: 0,
        needShip: 0,
        description: undefined,
        typeOptins: []
      }
      this.dataForm.giveList = this.dataForm.giveList || []
      this.dataForm.giveList.push(item)
    },
    handleDelGiveList(index) {
      this.dataForm.giveList.splice(index, 1)
    },
    getChannelOptions() {
      this.$store.dispatch('base/getDictionaryData', { sort: 'ConsultChannels' }).then(res => {
        this.channelOptions = this.isDetail ? res : res.filter(o => o.enabledMark == 1)
      })
    },
    querySearchCustomerAsync(queryString, cb) {
      getCustomerSelector(queryString).then(res => {
        cb(res.data)
      })
    },
    // handleSelectCustomer (item) {
    //   this.dataForm.customerName = item.name + "(" + item.mobile + ")"
    //   this.dataForm.customerId = item.id
    // },
    querySearchSchoolAsync(queryString, cb) {
      if (this.dataForm.area.length > 0)
        getSchoolSelector(this.dataForm.area.join(), queryString, 'primary').then(res => {
          cb(res.data)
        })
    },
    handleChangeGiveItem(vId) {
      if (vId) {
        //选中select中绑定的value值
        let obj = {}
        obj = this.goodsOptions.find(item => {
          //companyListAdd就是上面遍历的数组的数据源
          return item.id === vId //筛选出匹配的数据
        })
        this.selectGiveItem = obj
      }
    },
    submitGive() {
      let isEx = false
      this.dataForm.giveList.forEach(item => {
        if (item.goodsId == this.selectGiveItem.id) {
          isEx = true
          item.num += this.giveNum
          let text = this.selectGiveItem.fullName + ' ' + item.num + this.selectGiveItem.unit
          item.text = text
        }
      })

      if (!isEx) {
        let text = this.selectGiveItem.fullName + ' ' + this.giveNum + this.selectGiveItem.unit
        this.dataForm.giveList.push({
          goodsId: this.selectGiveItem.id,
          num: this.giveNum,
          category: this.selectGiveItem.category,
          text: text
        })
      }
    },
    resetForm() {
      this.dataForm.giveList = []
    },
    closeTag(tagName) {
      this.dataForm.giveList.forEach(item => {
        if (item == tagName) {
          this.dataForm.giveList.splice(this.dataForm.giveList.indexOf(item), 1)
        }
      })
    },
    handleSelectSchool(item) {
      this.dataForm.schoolName = item.name
      this.dataForm.schoolId = item.id
    },
    judgeShow(id) {
      if (!this.setting.formOperates || !this.setting.formOperates.length) return true
      let arr = this.setting.formOperates.filter(o => o.id === id) || []
      if (!arr.length) return true
      let item = arr[0]
      return item.read
    },
    judgeWrite(id) {
      if (!this.setting.formOperates || !this.setting.formOperates.length) return false
      let arr = this.setting.formOperates.filter(o => o.id === id) || []
      if (!arr.length) return true
      let item = arr[0]
      return !item.write
    }
  }
}
</script>

<style lang="scss" scoped>
.address .el-form-item__content {
  display: flex;
}
.row-group {
  padding-top: 20px;
  border: 1px solid #f2f2f2;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
  .row-group-title {
    position: absolute;
    left: 30px;
    top: -7px;
    background: #fff;
    padding: 0 10px;
    color: #929292;
    font-size: 12px;
  }
}

// 投资人信息表单域样式
.contact-form-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fafafa;

  .contact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e7ed;

    .contact-index {
      font-weight: 600;
      color: #303133;
      font-size: 14px;
    }
  }

  .company-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #d3d4d6;

    .section-title {
      font-weight: 500;
      color: #606266;
      font-size: 13px;
      margin-bottom: 15px;
      padding-left: 5px;
      border-left: 3px solid #409eff;
    }
  }
}

.empty-contact-list {
  border: 1px dashed #d3d4d6;
  border-radius: 4px;
  background-color: #fafafa;
}
</style>
